<template>
    <div>
        <!--这里需要传一个 currentUser 参数  因为导航栏要使用，不传会报错-->
<!--        <top-nav v-bind:currentUser="currentUser" ></top-nav>-->
        <top-nav @updateUser="setCurrentUser"></top-nav>
        <!--        <div style="width:700px; margin: auto; text-align: center"></div>-->
        <el-row type="flex" justify="center" class="main_body">
            <el-col :span="12">
                <!--页面标题-->
                <h1 class="center">{{errorSection}}</h1>
                <!--分割线-->
                <el-row type="flex" justify="center">
                    <el-col :span="15">
                        <el-divider></el-divider>
                    </el-col>
                </el-row>

                <!--错误提示框-->
                <el-row type="flex" justify="center" class="login_info_row" >
                    <el-col :span="13" >
                        <el-card class="box-card" shadow="hover">
                            <el-row type="flex" justify="center">
                                <el-col :span="13">
                                    <p>{{errorDescribe}}</p>

                                    <!--根据接收的参数显示  按钮-->
                                    <div v-if="redirectType === 0" class="center login_btn_div">
                                        <el-button type="primary" plain size="medium" @click="backToLogin">立即登录</el-button>
                                    </div>
                                    <div v-else-if="redirectType === 1" class="center login_btn_div">
                                        <el-button type="primary" plain size="medium" @click="toIndex">返回首页</el-button>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import navigateBar from "@/components/component/navigateBar"; //顶部导航栏，引用的

    export default {
        name: "errorPage",
        data(){
            return{
                // currentUser: { /*当前用户*/
                //     headImg: '',  /*头像图片在服务器存储的文件名  （以用户名保存）*/
                //     nickName: '',
                //     motto: '',
                //     role: '',
                // },
                currentUser: {}, /*当前用户*/
                errorSection:'',  /*出错模块*/
                errorDescribe:'',  /*错误描述*/
                redirectType: 0,  /*显示按钮类型  0登录  1首页*/
            }
        },
        created(){
            /*初始化用户信息*/
            // this.$http.get("http://localhost:8081/user/getUser").then(req=>{
            // this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.userGet).then(req=>{
            //     /*即使 后台返回的是null  req.data也不是null  而是空字符串""  */
            //     if (req.data !== ""){
            //         // this.currentUser.headImg = "http://localhost:8081/static/images/userAvatar/" + req.data.headImg;
            //         this.currentUser.headImg = this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg + req.data.headImg;
            //         this.currentUser.nickName = req.data.nickName;
            //         this.currentUser.motto = req.data.motto;
            //         this.currentUser.role = req.data.role;
            //     }else {  /*当前session中并没有当前用户信息*/
            //         this.$message({
            //             message: '当前您未登录！',
            //             type: 'warning'
            //         });
            //     }
            // });

            /*接收错误信息参数*/
            // this.errorSection = this.$route.params.errSection;
            // this.errorDescribe = this.$route.params.errDesc;
            /*
            * 因为接收的参数都是 string类型，而这里的redirectType 声明的是 number类型，如果直接用 === 和number 比较  必然返回false
            * 所以要先将其转为 number。  parseInt（string str, number radix）
            *   第一个参数为要转型的字符串，第二个参数（可省）指定进制（2到36之间，0x开头的字符串默认为16进制，其他默认为10进制  decimal）
            * */
            // this.redirectType = parseInt(this.$route.params.redctType, 10);
            // console.log("重定向参数类型：" + typeof this.redirectType);
            // console.log(this.errorSection + "---" + this.errorDescribe + "---" + this.redirectType);

            // 接收参数（帖子id）
            this.errorSection = this.$route.query.errSection;
            this.errorDescribe = this.$route.query.errDesc;
            this.redirectType = Number(this.$route.query.redctType);  /*字符串转number*/
            // console.log("重定向参数类型：" + this.$route.query.redctType);  //是常数0  1，而不是number
            console.log(this.errorSection + "---" + this.errorDescribe + "---" + this.redirectType);


        },
        mounted(){  // 这个时候 子组件的 mounted 都执行完了，父组件的currentUser已经初始化过了（无论是否登录）
            // 不对，到这里，子组件的 异步代码还是没有执行，虽然他 是执行完了 mounted..(严格来说只是执行完了里面的同步代码)
            console.log("进入 mounted");
            console.log("role:" + this.currentUser.role);
        },
        methods:{
            /*返回首页*/
            toIndex(){
                this.$router.push({name:"index"}); //跳转到 index.vue
            },

            backToLogin(){  /*返回登录*/
                this.$router.push({name:"login"}); //跳转到 login.vue
            },

            // 设置当前用户信息
            setCurrentUser(curUser){
                this.currentUser = curUser;

                // 无论是否登录， 子组件都会传值过来初始化（子组件created 中的异步代码）
                if (this.currentUser.role === ''){
                    this.$message({
                        message: '当前您未登录！',
                        type: 'warning'
                    });
                }
            },
        },
        components: {
            'topNav': navigateBar,  //顶部导航栏
        }
    }
</script>

<style scoped>
    /*发表帖子字样*/
    h1 {
        margin-top: 26px;
    }

    /*提示登录 结果的整行*/
    .login_info_row{
        margin-top: 55px;
        /*line-height: 20px;*/
    }
    .login_info_row p{  /*提示错误信息 描述的 p 标签*/
        line-height: 28px;
    }

    /*提示登录  结果卡片*/
    .box-card{
        margin-bottom: 200px;
        /*min-height: 265px;*/
    }
    /*提示登录  结果卡片 中包含立即登录按钮的div*/
    .login_btn_div{
        margin-top: 72px;
        margin-bottom: 15px;
    }

    /*为整个页面（不包括顶部的导航） 添加一个灰色的背景色  */
    .main_body{
        background-color: #f3f3f3;
    }
</style>